<template >
  <div>
    <el-button v-if="$route.path === '/home/peopleManage/officialsManage'" @click="handleTabEdit()">新增工作人员</el-button>
  </div>
  <el-table :data="tableData.newarr" style="width: 100%;" :border="true">
    <el-table-column prop="username" label="名称" :align="'center'"/>
    <el-table-column :align="'center'" v-if="Sshowtag" prop="description" label="商家介绍"/>
    <el-table-column :align="'center'" v-if="Sshowtag" prop="topic" label="商家主题"/>
    <el-table-column :align="'center'" v-if="Sshowtag" prop="price" label="商家定价"/>
    <el-table-column :align="'center'" v-if="Sshowtag" label="展示图片">
      <template #default="pic">
        <img class="img" :src=pic.row.picUrl />
      </template>
    </el-table-column>
    <el-table-column :align="'center'" prop="categary" label="用户类型" />
    <el-table-column v-if="Nshowtag" :align="'center'" prop="place" label="负责场地" />
    <el-table-column :align="'center'" label='账号管理'>
      <template #default="scope">
        <el-button 
        v-if="Nshowtag || Sshowtag" 
        link type="primary" size="small"
        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>

        <el-switch 
        v-if="Ushowtag" 
        v-model="scope.row.isDisable" 
        class="mb-2" 
        active-text="封禁" 
        inactive-text="解除"
        @change=Usure(scope.row) />
        <el-button 
        v-if="Nshowtag" 
        link type="primary" 
        size="small" 
        @click="delEdit(scope.row.username)">删除</el-button>
      </template>
    </el-table-column>
    <el-table-column :align="'center'" width="150">
      <template #header>
        <el-input v-model="search" size="small" placeholder="请输入搜索内容" @keyup.enter="searchMSG()" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { useStore } from 'vuex';
import { onMounted, reactive, defineProps, ref, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
import { useRoute } from 'vue-router';
import link from '@/util/api';
const route = useRoute()
const Ushowtag = route.path === '/home/peopleManage/userManage'
const Nshowtag = route.path === '/home/peopleManage/officialsManage'
const Sshowtag = route.path === '/home/peopleManage/merchantsManage'

const props = defineProps({
  tabdata: Array
})
const store = useStore()
const search = ref('')
const handleEdit = (index?: number, row?: any) => {
  store.commit('SET_DIALOG')
  store.commit('CHANGE_ROWDATA', row)
}
const handleTabEdit = (index?: number, row?: any) => {
  store.commit('SET_TABDIALOG')
}
//用户列表
let tableData = reactive({
  newarr: <any>[]
})
onMounted(() => {
  tableData.newarr = props.tabdata
})
const sentData = ()=>{
  tableData.newarr = props.tabdata
}
watch(props,sentData)
//删除功能
const delEdit = async (data: any) => {
  await ElMessageBox.confirm(
    '确定要把该用户删除?',
    '注意!',
    {
      distinguishCancelAndClose: true,
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  link(`/deleteWorker`, "get", '', { data }
  ).then(ok => {
    console.log(ok)
  })
}
const Usure = async (val: any) => {
  val.isDisable = !val.isDisable
  await ElMessageBox.confirm(
    val.isDisable ? '确定要把该用户/coser解封?' : '确定要把该用户/coser封禁',
    '注意!',
    {
      distinguishCancelAndClose: true,
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: val.isDisable ?  '成功解封' : '成功封禁' ,
      })
      //这里发送网络请求
      link(`/changeUserState?username=${val.username}`, "get").then(ok => {
            console.log(ok)
        }) 
      val.isDisable = !val.isDisable
    })
    .catch((action: Action) => {
      ElMessage({
        type: 'info',
        message: action === 'cancel' ? '取消封禁' : '再考虑一下',
      })
      //返回原来的boolean
    })
}
const searchMSG = () => {
  let arr: any = ref([]);
  let searchArr = ref<any>([])
    searchArr = props.tabdata 
  console.log("tableData", tableData)
  if (search.value != '') {
    for (let i = 0; i < searchArr.length; i++) {
      if (searchArr[i].username.indexOf(search.value) != -1) {
        arr.value.push(searchArr[i])
      }
    }
  } else {
    arr = props.tabdata
  }
  tableData.newarr = arr
}
watch(search,searchMSG)
</script>

<style scoped>
.img {
  width: 150px;
  margin: 0 auto;
}
</style>